<template>
  <div>
    <div>
      <van-nav-bar fixed>
        <template #left>
          <img class="logo" src="@/assets/logo.png" alt="">
        </template>
        <template #right>
          <van-icon name="search" size="0.48rem" color="#fff" @click="moveSearchPageFn"/>
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-tabs v-model="channelId" @change="channelChangeFn"
      animated sticky offset-top="1.226667rem">
        <van-tab v-for="obj in userChannelList" :key="obj.id" :title="obj.name" :name="obj.id">
          <ArticleList :channelId="channelId"></ArticleList></van-tab>
      </van-tabs>
      <van-icon name="plus" size="0.37333334rem" class="moreChannels" @click="plusClickFn"/>
    </div>
    <van-popup class="channel_popup" v-model="show" get-container="body">
      <ChannelEdit :userList="userChannelList"
       :unCheckList="unCheckChannelList"
       @addChannelEV="addChannelFn"
       @removeChannelEV="removeChannelFn"
       @closeEV="closeFn"
       v-model="channelId"
       ></ChannelEdit>
    </van-popup>
  </div>
</template>
<script>
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
import { getAllChannelsAPI, getUserChannelsAPI, removeTheChannelAPI, updateChannelsAPI } from '@/api'
export default {
  name: 'HomePage',
  components: {
    ArticleList,
    ChannelEdit
  },
  methods: {
    async channelChangeFn () {
      // const res2 = await getAllArticleListAPI({ channel_id: this.channelId, timestamp: (new Date()).getTime() })
      // console.log(res2)
      // this.articleList = res2.data.data.results

      // tab切换后，设置滚动条位置
      // tab切换时，这个组件内部，会把切走的容器height设置为0，滚动条因为没有高度所以回到了顶部
      // 切回来的一瞬间，没有高度，滚动事件从底下上来也被触发，所有才把数据设置为0
      // 切回来的一瞬间，高度为0，你设置滚动位置也没用
      this.$nextTick(() => {
        document.documentElement.scrollTop = this.channelScrollTObj[this.channelId]
        document.body.scrollTop = this.channelScrollTObj[this.channelId]
        // console.log(222)
      })
    },
    plusClickFn () {
      this.show = true
    },
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      const newArr = this.userChannelList.filter(obj => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj }
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      const res = await updateChannelsAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(obj => obj.id === channelObj.id)
      this.userChannelList.splice(index, 1)

      const res = await removeTheChannelAPI({ channelId: channelObj.id })
      console.log(res)
    },
    // 关闭弹出层
    closeFn () {
      this.show = false
    },
    // 首页 - 右上角放大镜点击事件 -> 跳转搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    },
    // 滚动事件
    scrollFn () {
      this.$route.meta.scrollT = document.documentElement.scrollTop || document.body.scrollTop
      // 同时保存当前频道的滚动距离
      this.channelScrollTObj[this.channelId] = document.documentElement.scrollTop || document.body.scrollTop
    }
  },
  async created () {
    const res = await getUserChannelsAPI()
    // console.log(res)
    this.userChannelList = res.data.data.channels
    const res2 = await getAllChannelsAPI()
    // console.log(res2)
    this.allChannelList = res2.data.data.channels
    // this.channelChangeFn()
  },
  data () {
    return {
      channelId: 0, // 频道ID
      userChannelList: [], // 频道列表
      allChannelList: [], // 所有频道列表
      show: false, // 频道弹出层显示/隐藏
      channelScrollTObj: {}
      // articleList: [] //文章列表
    }
  },
  computed: {
    unCheckChannelList () {
      return this.allChannelList.filter(bigObj =>
        this.userChannelList.findIndex(smallObj =>
          smallObj.id === bigObj.id) === -1)
    }
  },
  activated () {
    console.log(this.$route)
    // 监听滚动事件，进行保存
    window.addEventListener('scroll', this.scrollFn)
    // 设置滚动距离 异步事件（在监听事件前执行）
    document.documentElement.scrollTop = this.$route.meta.scrollT
    document.body.scrollTop = this.$route.meta.scrollT
  },
  deactivated () {
    // 移除滚动事件
    window.removeEventListener('scroll', this.scrollFn)
  }
}
</script>
<style scoped lang="less">
.logo {
    width: 100px;
    height: 30px;
}
.main{
  padding-top: 46px;
}
// 设置 tabs 容器的样式
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}
// 设置小图标的样式
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
.channel_popup{
  width:100vw;
  height: 100vh;
}
</style>
